<template>
  <model-show ref="modelShowRef" :factoryId="props.factoryId"></model-show>
  <div class="operate-box">
    <el-button type="warning" @click="onReset">场景重置</el-button>
    <el-button type="warning" @click="onChangeLabel">{{
      labelVisible ? "隐藏标签" : "显示标签"
    }}</el-button>
    <el-button type="warning" @click="goEdit">去编辑</el-button>
    <el-button type="warning" @click="onFullScreen">
      {{ fullscreenStatus ? "取消全屏" : "全屏" }}</el-button
    >
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import ModelShow from "@/components/model/ModelShow.vue";
import { useRouter } from "vue-router";
const router = useRouter();

const props = defineProps({
  factoryId: {
    type: String,
    default: "",
  },
});
const modelShowRef = ref(null);
const labelVisible = ref(true);

// 场景重置
const onReset = () => {
  modelShowRef.value.reset();
};

// 标签显示
const onChangeLabel = () => {
  labelVisible.value = !labelVisible.value;
  modelShowRef.value.showLabel(labelVisible.value);
};

// 去编辑
const goEdit = () => {
  router.push("/work/edit/" + props.factoryId);
};

// 全屏
const fullscreenStatus = ref(false);
const onFullScreen = () => {
  const element = document.documentElement;
  if (!fullscreenStatus.value) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
      // 适用于旧版WebKit浏览器
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
};
// 全屏监听事件
const addEventListenerFllscreen = (e) => {
  const status = document.fullscreenElement || document.webkitFullscreenElement;
  fullscreenStatus.value = !!status;
};
onMounted(() => {
  // 全屏监听事件
  document.addEventListener("fullscreenchange", addEventListenerFllscreen);
});
onBeforeUnmount(() => {
  document.removeEventListener("fullscreenchange", addEventListenerFllscreen);
});
</script>

<style lang="scss" scoped>
.operate-box {
  position: absolute;
  z-index: 100;
  bottom: 20px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>